<template>
  <div>
    <navigation></navigation>
    <go-top></go-top>
    <comment-icon></comment-icon>
    <div class="mybg"></div>
    <div class="mybox">
      <div class="my-img">
        <div class="quan">
          <img :src="user.uimg" alt="" />
          <div class="update-img" @click="updateImg">修改头像</div>
        </div>
      </div>
      <div class="mymessage">
        <div class="my-name">
          {{ user.uname }}
          <img @click="updateName" src="../../assets/img/update.svg" alt="" />
        </div>
        <div class="my-nav">
          <ul>
            <li
              v-for="(item, index) in tabList"
              :key="index"
              @click="changSubpage(index)"
              :class="{ activeli: indexs == index }"
            >
              <img :src="item.img" alt="" />
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <router-view />
    <div v-if="changImg">
      <update-img v-on:childByOut="childByOut"></update-img>
    </div>
    <div v-if="changName">
      <update-name v-on:childByNameOut="childByNameOut"></update-name>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
import { userMessage } from "../../network/usermes";

import Bottom from "../../components/bottom/bottom";
import Navigation from "../../components/navigation/navigation";
import UpdateImg from "../../components/updataing/updateImg";
import GoTop from "../../components/gotop/goTop";
import CommentIcon from "../../components/commenticon/commentIcon";
import UpdateName from "../../components/updataing/updateName";
export default {
  components: { Bottom, Navigation, UpdateImg, GoTop, CommentIcon, UpdateName },
  name: "My",
  data() {
    return {
      changImg: "",
      changName: "",
      indexs: "",
      tabList: [
        {
          name: "收藏",
          img: "http://qiangwu.top/shou.svg",
          chang: "collection",
        },
        {
          name: "评价",
          img: "http://qiangwu.top/ping.svg",
          chang: "evaluate",
        },
        {
          name: "信息",
          img: "http://qiangwu.top/message.svg",
          chang: "message",
        },
        {
          name: "历史",
          img: "http://qiangwu.top/history.svg",
          chang: "historys",
        },
      ],
      user: "",
    };
  },
  created() {
    this.getUserMes();
  },

  methods: {
    getUserMes() {
      userMessage(this.$Cookie.get("userid")).then((res) => {
        this.user = res.data.data;
      });
      console.log(this.$route.path);
      let childPath = this.$route.path.split("/")[2];
      if (childPath == "collection") {
        this.indexs = 0;
      }
      if (childPath == "evaluate") {
        this.indexs = 1;
      }
      if (childPath == "message") {
        this.indexs = 2;
      }
      if (childPath == "historys") {
        this.indexs = 3;
      }
    },

    changSubpage(index) {
      this.indexs = index;
      this.$router.push(this.tabList[index].chang);
    },

    updateImg() {
      this.changImg = true;
    },

    updateName() {
      this.changName = true;
    },

    childByOut: function (childValue) {
      this.changImg = childValue;
      this.getUserMes();
    },

    childByNameOut: function (childValue) {
      this.changName = childValue;
      this.getUserMes();
    },
  },
};
</script>

<style>
.mybg {
  width: 100%;
  height: 1.3rem;
  background-image: url("../../assets/img/mybg.png");
  background-size: 100% 100%;
}

.mybox {
  width: 80%;
  margin: 0 auto;
  display: flex;
  margin-top: -0.4rem;
  align-items: center;
}

.my-img {
  width: 10%;
}

.quan {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  position: relative;
  border: 5px solid #fff;
  cursor: pointer;
}

.my-img img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}

.update-img {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  font-size: 0.1rem;
  text-align: center;
  line-height: 0.8rem;
  color: #fff;
  display: none;
  cursor: pointer;
}

.my-img:hover .update-img {
  display: block;
}

.mymessage {
  margin-left: 0.2rem;
  border-bottom: 1px solid rgb(214, 212, 211);
  width: 90%;
}

.my-name {
  font-size: 0.15rem;
  color: #ffff;
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
}

.my-name img {
  width: 0.1rem;
  height: 0.1rem;
  margin-left: 0.1rem;
  cursor: pointer;
}

.my-nav ul {
  width: 2.2rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.my-nav ul li {
  display: flex;
  align-items: center;
  padding-bottom: 0.1rem;
  cursor: pointer;
}

.activeli {
  border-bottom: 2px solid rgb(36, 184, 242);
  color: rgb(36, 184, 242);
}

.my-nav ul li img {
  width: 0.15rem;
  height: 0.15rem;
}

.my-nav ul li span {
  font-size: 0.1rem;
  margin-left: 0.03rem;
}
</style>